<template>
    <div class="mainText main">
    <div class="pages clearfix">
        <div class="title">
            <p class="pageTitle">
                客户资源分配
            </p>
        </div>
        <div class="tableBtn">
            <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index.html' }">拟办</el-breadcrumb-item>
            <el-breadcrumb-item>客户资源分配</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <ul class="from">
                <li data-url='/index.html'>拟办</li>
                <li>客户资源分配</li>
            </ul> -->
            <ul class="functionButton titleButton">
                <li class="submit">
                    <p>
                        <span>帮助</span>
                    </p>
                </li>
                <li class="filter" data-show="0">
                    <p>
                        <span>筛选</span>
                    </p>
                </li>
                <li class="add">
                    <p>
                        <span>转至其他海域</span>
                    </p>
                </li>
                <li onclick="backBtnHander();">
                    <p>
                        <span>返回</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <div class="searchArea">
        <div class="firstSearch">
            <span>转入日期:</span>
            <input class="defaultInput wid_180" id="orderDate" placeholder="转入日期"/>
        </div>
    </div>
    <div class="table-container scroll-wrap mt-16">
        <div class="scroll-cont cont0">
            <div class="ztreeTable">
                <!-- ztree列表区域 -->
                <div class="goodsTree" style="float: left;">
                    <div class="">
                      <ul id="treeDemo" class="ztree"></ul>
                      <div id="rMenu" class="rMenu">
                        <ul>
                          <li id="m_add" >
                            <!--跳到新建私海页面-->
                            <a href="">新建私海</a>
                          </li>
                          <li id="m_rename" @click="editAlbumName()">
                            <a href="javascript:;">修改私海</a>
                          </li>
                          <li id="m_del" @click="removeTreeNode()">
                            <a href="javascript:;">删除私海</a>
                          </li>
                        </ul>
                      </div>
                    </div> 
                </div>
                
            
                <!-- 表格区域 -->
                <el-table
                class="defaltTable listTable table1 tableInput"
                :data="CustomerSeaController.filter(data => !search || data.shortName.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%"
                >
                <el-table-column type="selection"></el-table-column>
                <span class="checkAll"></span>
                
                <el-table-column
                    prop="shortName"
                    label="客户名称"
                    min-width="16%"
                    class="input1">
                    <template slot-scope="scope" slot="header">
                      <div @click="isInputShow()" class="input">客户名称</div>
                        <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"
                        v-show ='inputShow'
                        class="headInput"
                        />
                        
                    </template>
                  <!-- <span class="strangles circle"></span> -->
                </el-table-column>
                <el-table-column
                    :filters="[{text: '代理商', value: '代理商'}, {text: '经销商', value: '经销商'}]"
                    :filter-method="filterName"
                    :filter-multiple='false'
                    prop="customerType"
                    label="客户类型"
                    min-width="8%">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="转入日期"
                    sortable
                    min-width="8%">
                </el-table-column>
                </el-table>
            </div>
            <!-- 分页栏区域 -->
            <div class="pageBox">
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 15, 18]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
            </div>
        </div>
        <div class="scroll-bar bar0" style="display: none;">
            <div class="scroll-slider slider0"></div>
        </div>
    </div>
</div>
</template>

<script>

export default {
  data () {
    return {
        // 获取客户列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pageNumber: 1,
        // 当前每页显示多少条数据
        rowNumber: 10,
        seaId: 0,
      },
      // 总数据条数
      total: 0,
      // 客户海id所属客户列表
       CustomerSeaController:[],
       // 客户海列表
       CustomerSeasList:[],
        // 搜索框显示隐藏
        search: '',
      inputShow: false,
      
    //   ztree
      setting:{
        data:{
          key:{
            name:'name',
            children:'seaList'
          },
          simpleData:{
              enable: true,
              idKey: "id",
              pIdKey: "pId",
              rootPId: 0,
          },
          callback: {
            onRightClick: this.onRightClick,
            beforeRename: this.beforeRename
          }
        }
      },
      zNodes: []
    }
  },
  created () {
    this.getCustomerSeaController()
    // this.getSeasList()
  },
  mounted () {
    this.getTreeList()
  },
  methods: {

    
    // 请求客户海树状图列表
    async getTreeList(){
       const {data:res} = await this.$http.get('/customer/seaManage/seaStores')
       let arr1 =  res.body
       arr1.forEach(function (item, i) {
          item.name = item.storeName
          if(item.seaList) {
              item.seaList.forEach(function (items, i) {
                  items.name = items.seaName
              })
          }
      })
     
      this.zNodes= res.body
      console.log(this.zNodes);

      $.fn.zTree.init($('#treeDemo'), this.setting, this.zNodes )
    },
    // 请求客户海列表
    // async getSeasList(){
      
    //   const {data:res} = await this.$http.get('/customer/seaManage/seas')
    //   // let arr1 =  res.body.seaList
    // this.CustomerSeasList = res.body.seaList
      
    // },
    // 请求客户海id对应信息
    async getCustomerSeaController(){
       const {data:res} = await this.$http.get('/customerBasicInfo/listCustomerBySeaId',{
          params: this.queryInfo 
       })
     this.total = res.body.totalCount

      let arr = res.body.list
      for(var i = 0;i < arr.length;i++) {
       if(arr[i].customerType === '1') {
         arr[i].customerType = '代理商'
       }else if(arr[i].customerType === '2'){
         arr[i].customerType = '经销商'
       }
      }
     this.CustomerSeaController = arr
     console.log(this.CustomerSeaController);
     

    },
    
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.rowNumber = newSize
      this.getCustomerSeaController()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageNumber = newPage
      this.getCustomerSeaController()
    },
    // 下拉筛选
    filterName(value, row, column) {
      const property = column['property']
      return row[property] == value;
    },
    // 表格点击出现搜索框
    isInputShow(){
      this.inputShow = !this.inputShow
      
    },
    // ztree节点右击事件
    onRightClick (event, treeId, treeNode) {
      let zTreeObj = jQuery.fn.zTree.getZTreeObj('treeDemo')
      document.oncontextmenu = function(){
        return false;
      }
      // 父节点不需要点击事件（如果父节点也有操作就注释此句）
      //  if (treeNode.storeName) {
      //    return;
      //  }
      // 获取鼠标点击位置
      var x = event.clientX;
      var y = event.clientY;
      // 如果在父节点点击传root，操作只有新建
      // 如果在子节点点击传node，操作有新建、修改、删除（此处根据需求做判断 如父节点不给操作就直接return）
      if (treeNode.storeName) {
        zTreeObj.cancelSelectedNode();
        this.showRMenu("root", x, y);
      } else {
        zTreeObj.selectNode(treeNode);
        console.log(treeNode)
        this.showRMenu("node", x, y);
      }
    },
    // 显示操作目录框
    showRMenu(type, x, y) {
      // type 判断是在子节点还是在父节点（根据需求调整）
      let rMenu = $("#rMenu");
      $("#rMenu ul").show();
      if (type=="root") {
        $("#m_del").hide();
        $("#m_rename").hide();
      } else {
        $("#m_del").show();
        $("#m_rename").show();
        $("#m_add").show();
      }
      // 给操作框设置定位 跟随鼠标点击位置
      rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
      // 给body绑定事件 左击任意处操作框消失
      $("body").bind("mousedown", this.onBodyMouseDown);
    },
    // 隐藏操作目录框
    hideRMenu() {
      let rMenu = $("#rMenu");
      if (rMenu) rMenu.css({"visibility": "hidden"});
      // 给body解绑事件 不影响其他点击事件的操作
      jQuery("body").unbind("mousedown", this.onBodyMouseDown);
    },
    onBodyMouseDown(event) {
      let rMenu = $("#rMenu");
      if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
        rMenu.css({"visibility" : "hidden"});
      }
    },
    // 修改目录
    editAlbumName() {
      this.hideRMenu();
      let zTreeObj = jQuery.fn.zTree.getZTreeObj('treeDemo')
      var nodes = zTreeObj.getSelectedNodes();
      console.log(zTreeObj)
      zTreeObj.editName(nodes[0]);
      return true;
    },
    // 编辑并保存节点
    beforeRename(treeId, treeNode, newName, isCancel) {
      if (newName.length == 0) { //节点名称判断
        alert("不能为空。");
        return false;
      } else {
        // 取到需要传的参数
        let params = {
          'Id':  treeNode.id,
          "Name": newName
        }
        // 传到后台接口
        // const {data:res} = await this.$http.post('/customer/seaManage/seaStores', params)
        // if (res.body) {
        //     用提示框提示一下
        //     this.$message.success('保存成功')
        //     console.log('保存成功')
        // }
      }
    },
    // 删除节点
    removeTreeNode() {
      this.hideRMenu();
      let zTreeObj = jQuery.fn.zTree.getZTreeObj('treeDemo')
      var nodes = zTreeObj.getSelectedNodes();
      zTreeObj.removeNode(nodes[0])
      // 取到需要传的参数id
      let params = {"id": nodes[0].id}
      // 传到后台接口
      // const {data:res} = await this.$http.post('/customer/seaManage/seaStores', params)
      // if (res.body) {
      //     用提示框提示一下
      //     this.$message.success('删除成功')
      //     console.log('保存成功')
      // }
    }
  }
}
</script>

<style>

.ztreeTable{
            display: flex;
            justify-content: space-between;
            align-items: flex-start
        }

        .ztreeTable .table1{
            width: calc(100% - 240px);
        }
        .contextMenu{
            position: absolute;
            font-size: 12px;
            color: #333;
            border: 1px solid #e0e0e0;
            background: #fff;
        }
        .contextMenu li{
            width: 100px;
            text-align: center;
            padding: 0 10px;
            line-height: 30px;
            cursor: pointer;
        }
        .contextMenu li.selected{
            background: #f3f3f3;
        }
        .tableInput .el-table__header-wrapper{
            overflow: initial;
        }
        .el-table.tableInput .cell {
            overflow: initial;
        }
        .el-table.tableInput th {
            overflow: initial;
        }
        .tableInput .headInput {
            position: absolute;
            top: 40px;
            z-index: 9;
            left: 0px;
        }
        .input {
          height: 40px;
          line-height: 40px
        }
        /* .input1 {
          overflow: initial
        } */

        div#rMenu{
          position: fixed;
          visibility:hidden;
          top:0;
          background-color: #fff;
          text-align: left;
          border: 1px solid #c9caca;
          box-shadow: 0 0 2px #c9caca;
          padding: 2px 0;
          z-index: 999;
          width: 120px;
          height: 110px;
        }

        div#rMenu ul li{
          margin: 1px 0;
          padding: 0 5px;
          cursor: pointer;
          list-style: none;
          height: 30px;
          background-color: #fff;

        }
        div#rMenu ul li:hover{
          background: #ddd;
        }
</style>
